<!--中间的表单设置-->
<template>
  <div>
    <a-form
      ref="form"
      :model="setUpList"
      autoLabelWidth
      :layout="(layout as Tlayout)"
      :disabled="disabled"
    >
      <a-row :gutter="16">
        <a-col
          v-for="(item, index) in setUpList"
          :key="index"
          :span="item.span"
        >
          <FormItem
            :componentType="item[fieldNames.componentType]"
            :props="item.props"
            :name="item[fieldNames.labelName]"
            :required="item.required"
            :regex="regexList.includes(item.componentType) ? regex : undefined"
            v-model:values="item.values"
            :data="item"
            :review="review"
          />
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import FormItem from '../FormItem/index.vue';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;

withDefaults(
  //参数说明
  defineProps<{
    setUpList: any[]; //tab显示的tab列表
    layout: string; //a-form的layout参数,
    fieldNames?: {
      idName?: string;
      labelName?: string;
      componentType?: string;
      fieldName?: string;
    };
    //正则库
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
    disabled?: boolean | undefined;
    review?: boolean;
  }>(),
  {
    fieldNames: () => ({
      idName: 'id',
      labelName: 'ctlCnName',
      componentType: 'componentType',
      fieldName: 'ctlFieldName'
    }),
    disabled: void 0
  }
);

const regexList = ['TEXT']; //可以传递正则库的控件类型列表，避免内存泄漏

const form = ref();

//表单校验函数
const validate = async () => {
  const res = await form.value.validate();
  if (res) return Promise.resolve();
  return Promise.reject();
};
defineExpose({ validate }); //抛出导航函数
</script>
<style lang="less" scoped></style>
